<!DOCTYPE html>
<html lang="cn-ZH">
    <head>
        <meta charset="UTF-8">
        <title>pagination.js - Mss</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
        <link rel="stylesheet" type="text/css" href="./style/pagination.css" media="screen">
        <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body>
        <div class="wrapper">
            <div class="container">
                
                <div class="content">
                    <h1>分页-pagination</h1>
                    <p>需先引入jQuery，再引入pagination组件</p>
                    <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
                    <pre class="bad">&lt;script&nbsp;src="jquery.pagination.js"&gt;&lt;/script&gt;</pre>
                    <p>组件样式与功能分离，自定义样式（注：这里加样式是为了示例看的清楚，操作方便。）</p>
                    <div class="eg">
                        <div class="M-box"></div>
                        <p class="tips">当前是第<span class="now"></span>页</p>
                        <p>HTML</p>
        <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"M-box"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
                        <p>Javascript</p>
        <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">callback</span>:<span style="color:#708">function</span>(<span style="color:#00f">api</span>){<br>        <span style="color:#000">$</span>(<span style="color:#a11">'.now'</span>).<span style="color:#000">text</span>(<span style="color:#000-2">api</span>.<span style="color:#000">getCurrent</span>());<br>    }<br>},<span style="color:#708">function</span>(<span style="color:#00f">api</span>){<br>    <span style="color:#000">$</span>(<span style="color:#a11">'.now'</span>).<span style="color:#000">text</span>(<span style="color:#000-2">api</span>.<span style="color:#000">getCurrent</span>());<br>});</pre>
                    </div>
                    <div class="eg">
                        <div class="M-box2"></div>
                        <p class="tips">开启第一页和最后一页的按钮,并且内容可自定义。内容默认为1和总页数。（注：如coping为false，homePage和endPage无效。）</p>
                        <p>HTML</p>
        <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box2'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">coping</span>:<span style="color:#219">true</span>,<br>    <span style="color:#000">homePage</span>:<span style="color:#a11">'首页'</span>,<br>    <span style="color:#000">endPage</span>:<span style="color:#a11">'末页'</span>,<br>    <span style="color:#000">prevContent</span>:<span style="color:#a11">'上页'</span>,<br>    <span style="color:#000">nextContent</span>:<span style="color:#a11">'下页'</span><br>});</pre>
                    </div>
                    <div class="eg">
                        <div class="M-box1"></div>
                        <p class="tips">
                        总数据<span class="count">250</span>条，每页显示<span class="count">5</span>条，总页数为<span class="count">50</span>页
                        </br>如果配置了数据总数和当前一页显示多少条数据，总页数会自动计算，这种情况下再配置总页数无效。
                        </br>（注：数据总数totalData和每页显示的条数showData必须同时配置，否则默认使用总页数pageCount。）</p>
                        <p>HTML</p>
        <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"M-box1"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
                        <p>Javascript</p>
        <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box1'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">totalData</span>:<span style="color:#164">100</span>,<br>    <span style="color:#000">showData</span>:<span style="color:#164">5</span><br>    <span style="color:#000">coping</span>:<span style="color:#219">true</span><br>});</pre>
                    </div>
                    <div class="eg">
                        <div class="M-box3"></div>
                        <p class="tips">参数：jump，开启跳转到第几页，跳转按钮文本内容可修改。（如果超出最大页数会变成总页数的值）</p>
                        <p>HTML</p>
        <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"M-box3"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
                        <p>Javascript</p>
        <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box3'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">pageCount</span>:<span style="color:#164">50</span>,<br>    <span style="color:#000">jump</span>:<span style="color:#219">true</span>,<br>    <span style="color:#000">coping</span>:<span style="color:#219">true</span>,<br>    <span style="color:#000">homePage</span>:<span style="color:#a11">'首页'</span>,<br>    <span style="color:#000">endPage</span>:<span style="color:#a11">'末页'</span>,<br>    <span style="color:#000">prevContent</span>:<span style="color:#a11">'上页'</span>,<br>    <span style="color:#000">nextContent</span>:<span style="color:#a11">'下页'</span><br>});</pre>
                    </div>
                    <div class="eg">
                        <div class="M-box4"></div>
                        <p class="tips">动态修改总页数，初始化时3页，动态修改为20页</p>
                        <p>HTML</p>
        <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"M-box4"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
                        <p>Javascript</p>
        <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box4'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">pageCount</span>: <span style="color:#164">3</span>, <span style="color:#a50">//初始化时总页数3页</span><br>    <span style="color:#000">callback</span>:<span style="color:#708">function</span>(<span style="color:#00f">api</span>){<br>        <span style="color:#000-2">api</span>.<span style="color:#000">setPageCount</span>(<span style="color:#164">20</span>);<span style="color:#a50">//动态修改总页数为20页</span><br>    }<br>});</pre>
                    </div>
                    <div class="eg">
                       
                        <p>HTML</p>
        <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"M-box4"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
                        <p>Javascript</p>
        <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box4'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">pageCount</span>: <span style="color:#164">50</span>,<br>    <span style="color:#000">jump</span>: <span style="color:#219">true</span>,<br>    <span style="color:#000">callback</span>:<span style="color:#708">function</span>(<span style="color:#00f">api</span>){<br>        <span style="color:#708">var</span> <span style="color:#00f">data</span> = {<br>            <span style="color:#000">page</span>: <span style="color:#000-2">api</span>.<span style="color:#000">getCurrent</span>(),<br>            <span style="color:#000">name</span>: <span style="color:#a11">'mss'</span>,<br>            <span style="color:#000">say</span>: <span style="color:#a11">'oh'</span><br>        };<br>        <span style="color:#000">$</span>.<span style="color:#000">getJSON</span>(<span style="color:#a11">'http://localhost:3000/data.json'</span>,<span style="color:#000-2">data</span>,<span style="color:#708">function</span>(<span style="color:#00f">json</span>){<br>            <span style="color:#000">console</span>.<span style="color:#000">log</span>(<span style="color:#000-2">json</span>);<br>        });<br>    }<br>});</pre>
                    </div>
                    <div class="options">
                        <p>options(参数配置)</p>
                        <table>
                            <thead>
                                <tr>
                                    <td>参数</td>
                                    <td>默认值</td>
                                    <td class="explain">说明</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>pageCount</td>
                                    <td>9</td>
                                    <td class="explain">总页数</td>
                                </tr>
                                <tr>
                                    <td>totalData</td>
                                    <td>0</td>
                                    <td class="explain">数据总条数</td>
                                </tr>
                                <tr>
                                    <td>current</td>
                                    <td>1</td>
                                    <td class="explain">当前第几页</td>
                                </tr>
                                <tr>
                                    <td>showData</td>
                                    <td>0</td>
                                    <td class="explain">每页显示的条数</td>
                                </tr>
                                <tr>
                                    <td>prevCls</td>
                                    <td>'prev'</td>
                                    <td class="explain">上一页class</td>
                                </tr>
                                <tr>
                                    <td>nextCls</td>
                                    <td>'next'</td>
                                    <td class="explain">下一页class</td>
                                </tr>
                                <tr>
                                    <td>prevContent</td>
                                    <td>'<'</td>
                                    <td class="explain">上一页节点内容</td>
                                </tr>
                                <tr>
                                    <td>nextContent</td>
                                    <td>'>'</td>
                                    <td class="explain">下一页节点内容</td>
                                </tr>
                                <tr>
                                    <td>activeCls</td>
                                    <td>'active'</td>
                                    <td class="explain">当前页选中状态class名</td>
                                </tr>
                                <tr>
                                    <td>count</td>
                                    <td>3</td>
                                    <td class="explain">当前选中页前后页数</td>
                                </tr>
                                <tr>
                                    <td>coping</td>
                                    <td>false</td>
                                    <td class="explain">是否开启首页和末页，值为boolean</td>
                                </tr>
                                <tr>
                                    <td>isHide</td>
                                    <td>false</td>
                                    <td class="explain">总页数为0或1时隐藏分页控件</td>
                                </tr>
                                <tr>
                                    <td>keepShowPN</td>
                                    <td>false</td>
                                    <td class="explain">是否一直显示上一页下一页</td>
                                </tr>
                                <tr>
                                    <td>homePage</td>
                                    <td>''</td>
                                    <td class="explain">首页节点内容，默认为空</td>
                                </tr>
                                <tr>
                                    <td>endPage</td>
                                    <td>''</td>
                                    <td class="explain">尾页节点内容，默认为空</td>
                                </tr>
                                <tr>
                                    <td>jump</td>
                                    <td>false</td>
                                    <td class="explain">是否开启跳转到指定页数，值为boolean类型</td>
                                </tr>
                                <tr>
                                    <td>jumpIptCls</td>
                                    <td>'jump-ipt'</td>
                                    <td class="explain">文本框内容</td>
                                </tr>
                                <tr>
                                    <td>jumpBtnCls</td>
                                    <td>'jump-btn'</td>
                                    <td class="explain">跳转按钮class</td>
                                </tr>
                                <tr>
                                    <td>jumpBtn</td>
                                    <td>'跳转'</td>
                                    <td class="explain">跳转按钮文本内容</td>
                                </tr>
                                <tr>
                                    <td>callback</td>
                                    <td>function(){}</td>
                                    <td class="explain">回调函数，参数"index"为当前页</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="callback">
                        <p>api接口</p>
                        <table>
                            <thead>
                                <tr>
                                    <td>方法</td>
                                    <td>参数</td>
                                    <td>说明</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>getPageCount()</td>
                                    <td>无</td>
                                    <td>获取总页数</td>
                                </tr>
                                <tr>
                                    <td>setPageCount(page)</td>
                                    <td>page：页数</td>
                                    <td>设置总页数</td>
                                </tr>
                                <tr>
                                    <td>getCurrent()</td>
                                    <td>无</td>
                                    <td>获取当前页</td>
                                </tr>
                                <tr>
                                    <td>filling()</td>
                                    <td>无</td>
                                    <td>填充数据，参数为页数</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
           
        </div>
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="./script/jquery.pagination.js"></script>
        <script>
            $(function(){
                $('.M-box').pagination({
                    callback:function(api){
                        $('.now').text(api.getCurrent());
                    }
                },function(api){
                    $('.now').text(api.getCurrent());
                });

                $('.M-box2').pagination({
                    coping:true,
                    homePage:'首页',
                    endPage:'末页',
                    prevContent:'上页',
                    nextContent:'下页'
                });

                $('.M-box1').pagination({
                    totalData:250,
                    showData:5,
                    coping:true
                });

                $('.M-box3').pagination({
                    pageCount:50,
                    jump:true,
                    coping:true,
                    homePage:'首页',
                    endPage:'末页',
                    prevContent:'上页',
                    nextContent:'下页'
                });

                $('.M-box4').pagination({
                    pageCount: 3, //初始化时总页数3页
                    callback:function(api){
                        api.setPageCount(20);//动态修改总页数为20页
                    }
                });

                $('.M-box5').pagination({
                    pageCount: 50,
                    jump: true,
                    callback:function(api){
                        var data = {
                            page: api.getCurrent(),
                            name: 'mss',
                            say: 'oh'
                        };
                        $.getJSON('http://localhost:3000/data.json',data,function(json){
                            console.log(json);
                        });
                    }
                });
            });
        </script> 
    </body>
</html>